<template>
  <div>
    <div class="canvasDiv" id="canvasDiv">
      <div id="tableContainer" style="width: 100%; height: calc(100vh - 100px)"></div>

      <div class="editCont" id="editCont" contenteditable="true" @blur="editConInput"></div>

      <el-select
        class="selectEdit"
        ref="editSelectRef"
        v-model="valueSelect"
                                                            
        filterable
        
        @change="selectChange"
      >
        <el-option v-for="item in optionsSelect" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>

      <el-select
   
        class="selectEditMultiple"
        ref="editSelectMultRef"
        v-model="valueSelectMultiple"
        :multiple="true"
        filterable
        clearable
        @change="selectChangeMulit"
      >
        <el-option v-for="item in optionsSelect" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>


      <!-- 数据错误 -->
      <div class="error_div_tip">
        <div class="err_cont">
          <div class="tip_title">{{$t("merak.data_error")}}</div>
          <div class="errr_tip_content">
            <div class="err_tip_item"></div>
          </div>
        </div>
      </div>

      <!-- 弹窗批量编辑 -->
      <div v-if="moreEditDialogVisible">
        <el-dialog v-model="moreEditDialogVisible" :title="`${$t('merak.batch_editing')}『${moreEditColumnHeader?.name}』`" width="500">
          <div class="moreEditContent">
            <div v-if="moreEditColumnHeader?.type == 'input'" style="width: 95%">
              <qfInput v-model="moreEditParams.label" @change="value => moreEditFormChange(value, 'input')"></qfInput>
            </div>
            <div v-if="moreEditColumnHeader?.type == 'number'" style="width: 95%">
              <qfInput v-number v-model="moreEditParams.label" @change="value => moreEditFormChange(value, 'input')"></qfInput>
            </div>
            <div v-if="moreEditColumnHeader?.type == 'select' || moreEditColumnHeader?.type == 'multiple'">
              <el-select
                filterable
                clearable
                :multiple="moreEditColumnHeader?.multiple"
                v-model="moreEditParams.value"
                @change="value => moreEditFormChange(value, 'select')"
              >
                <el-option
                  v-for="selectItem in moreEditColumnHeader.values"
                  :key="selectItem.value"
                  :label="selectItem.label"
                  :value="selectItem.value"
                />
              </el-select>
            </div>
            <div v-if="moreEditColumnHeader.type == 'date'">
              <!-- 时间 -->
              <el-date-picker
                style="width: 100%"
                :teleported="false"
                v-model="moreEditParams.label"
                type="date"
                value-format="YYYY-MM-DD"
                @change="value => moreEditFormChange(value, 'date')"
              />
              <!-- -->
            </div>
          </div>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="moreEditDialogVisible = false">{{$t("merak.cancel")}} </el-button>
              <el-button type="primary" @click="confirmEdit"> {{$t("merak.save")}} </el-button>
            </div>
          </template>
        </el-dialog>
      </div>
      <!-- <div class="bg_top"></div>
      <div class="bg_left"></div> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch, defineExpose, computed, nextTick,onUnmounted } from "vue";
import * as VTable from "@visactor/vtable"; 
import qfInput from "../a-qfInput/index.vue";
import { ro } from "element-plus/es/locale";
import { chownSync } from "fs";
import { arg, number } from "mathjs";
import { json } from "stream/consumers";
import { start } from "repl";
import { t } from "vxe-table";

let tableInstance = null;
 
const props = withDefaults(
    defineProps<{
  frozenNum?:number,
    headData?: any; //头部数据
    tableData: any; //表格数据 
  }>(),
  {
   frozenNum:0
  }
);
 
console.log(props);
//监听表头事件
// watch(
//   () => props.headData,
//   (newValues, oldValues) => {
//     if (newValues) {
//         console.log()
//     }
//   },
//   { deep: true }
// );
const frozenCom=computed(()=>{return (Number(props.frozenNum)+1)});
const columnsComputed = computed(() => {
  return handleHeadData(props.headData);
});
const recordComputed = computed(() => {
  return handleRecords(props.tableData);
});

const handleHeadData = headArr => {
  let newArr = [];
  if (headArr && headArr.length > 0) {
    newArr = headArr.map(h => {
      return {
        field: h.key,
        title: h.name,
        type: h.type,
        minWidth: 200,
        width: "auto"
      };
    });
  }
  return newArr;
};

const handleRecords = tableArr => {
  let newArr = [];
  newArr = tableArr.map(t => {
    let parObj = {};
    for (let dKey in t.data) {
        if(!t.data[dKey].value){
           t.data[dKey].value= t.data[dKey].label
        }
      if (t.data[dKey].errTip) {
        parObj[dKey] = [t.data[dKey].label,t.data[dKey].value, t.data[dKey].errTip];
      } else {
        parObj[dKey] = [t.data[dKey].label,t.data[dKey].value];
      }
    }
    return parObj;
  });
  return newArr;
};
console.log(recordComputed);

let rangesRan = {}; //判断样式选中区域
const records = JSON.parse(JSON.stringify(recordComputed.value));
const columns = JSON.parse(JSON.stringify(columnsComputed.value));
VTable.register.theme("themeRegisterOne", { 
    defaultStyle: {
      borderLineWidth: 1
    },
    underlayBackgroundColor: "#ffffff",
    headerStyle: {  
      bgColor(args) {
        // console.log(args,"=================")
        const { col } = args;
        // console.log(rangesRan, col);
        const { start, end } = rangesRan;
        if (start?.col == end?.col && end?.col == col) {
          return "#e5e5ffad";
        }
        if (start?.col <= col && end?.col >= col) {
          return "#e5e5ffad";
        }
        return "#e5e5ff36";
      },
      borderColor: "#e4e8ed",
      // borderColor: "red",
      borderLineWidth:1,
      fontWeight: "normal",
      color: "#646567",
      fontSize: 12,
      lineHeight: 40,
      padding: [10, 10, 5, 10]
    },

    bodyStyle: {
      borderColor: "#e4e8ed",
      borderLineWidth: 1,
      fontSize: 13,
      color: "#303133",
      hover: {
        inlineRowBgColor: "#e5e5ff36",
        cellBgColor: "#e5e5ff36"
      }
    },
    scrollStyle: {
      visible: "always",
      width: 10,
      hoverOn: true,
      barToSide: true
    },
    //   selectionStyle: {//选中
    //   cellBorderLineWidth: 2,
    //   cellBorderColor: "#a84be6",
    //   cellBgColor: "rgba(153,0,255,0.2)"
    // },
    frameStyle: {
      //表格边框
      borderColor: "#e4e8ed",
      borderLineWidth: 2
    }
    // frozenColumnLine:{//冻结列
    // shadow:{
    //    width:3,
    // startColor:"#f4f8ff",
    // endColor:"#fff"
    // }
    // } 
});
const option = {
  records,
  columns,
  widthMode: "standard", ///"autoWidth", //
    theme: "themeRegisterOne",
 
  autoFillWidth: true,
  frozenColCount: frozenCom.value, //冻结列数
  hover: {
    highlightMode: "cross"
  },

  rowSeriesNumber: {
    //序号
    title: "",
    width: 80, 
    disableColumnResize:true,//禁止列宽调整
    headerStyle: {
      color: "black",
      bgColor: "#e5e5ff36",
      borderColor: "#e4e8ed",
      borderLineWidth: 2
    },

    style: {
      textAlign: "center",
      borderLineWidth: 0,
      color: "#303133",
      bgColor(args) {
        const { row } = args;
        // console.log(rangesRan,row)
        const { start, end } = rangesRan;
        if (start?.row == end?.row && end?.row == row) {
          return "#e5e5ffad";
        }
        if (start?.row <= row && end?.row >= row) {
          return "#e5e5ffad";
        }
        return "#ffffff";
      }
    }
  },
  keyboardOptions: {
    moveEditCellOnArrowKeys: true, //如果当前是在编辑中的单元格，方向键可以移动到下个单元格并进入编辑状态，而不是编辑文本内字符串的光标移动 。
    copySelected: true, //开启快捷键复制，与浏览器的快捷键一致。
    pasteValueToCell: true //开启快捷键粘贴，与浏览器的快捷键一致。粘贴生效仅针对配置了编辑 editor 的单元格
  },
  // theme: VTable.themes.ARCO.extends({
  //   selectionStyle: {
  //     cellBorderLineWidth: 2,
  //     cellBorderColor: "#a84be6",
  //     cellBgColor: "rgba(153,0,255,0.2)"
  //   }
  // }),
  editor: "", // 配置一个空的编辑器，以遍能粘贴到单元格中
  editCellTrigger: "click",
  autoWrapText: false, //是否自动换行

  menu: {
    //右击数据
    contextMenuItems: [{ text: "批量修改", menuKey: "0" }]
  },
  customRender(args) {
    if (args.row === 0 || args.col === 0) return null;
   
    const { dataValue, table, row, col, rect } = args;
    const elements = [];
    let top = 27;
    const left = 10; 
    let maxWidth = 0;
     let maxWidthTd = 0;
    if (dataValue.length==2) {
      let text = dataValue; //rect.width;

      if (rect.width > maxWidthTd) {
        text = changeTxt(rect.width, dataValue[0]);
      } else {
        text = changeTxt(maxWidthTd, dataValue[0]);
      } 
      //    if(columns[col]&&columns[col].type=="select"){
      //    elements.push({
      //   type: "icon",
      //   svg: '<svg t="1716451067270" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2815" width="16" height="16"><path d="M966.4 323.2c-9.6-9.6-25.6-9.6-35.2 0l-416 416-425.6-416c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l441.6 432c9.6 9.6 25.6 9.6 35.2 0l435.2-432C976 345.6 976 332.8 966.4 323.2z" p-id="2816" fill="#8a8a8a"></path></svg>',
      //   x: rect.width - 15,
      //   y: top-10,
      //   width: 10,
      //   height: 10
      // });
      // }
      elements.push({
        type: "text",
        fill: "#303133",
        font: "13px sans-serif",
        baseline: "top",
        text: text,
        x: left,
        y: top
      });
      maxWidth = Math.max(maxWidth, table.measureText(dataValue, { fontSize: "15" }).width);
    } else {
      //   elements.push({
      //     type: "rect",
      //     stroke: "#000",
      //     fill: "blue",
      //     x: rect.width - 6,
      //     y: 0,
      //     width: 6,
      //     height: 6
      //   });
      let text = dataValue[0]; //rect.width;
      if (rect.width > maxWidthTd) {
        text = changeTxt(rect.width, dataValue[0]);
      } else {
        text = changeTxt(maxWidthTd, dataValue[0]);
      }
      elements.push({
        type: "icon",
        svg: '<svg t="1715914805482" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4237" width="16" height="16"><path d="M952.325 62l9.675 900-890.325-900z" fill="#d81e06" p-id="4238"></path></svg>',
        x: rect.width - 8,
        y: 0,
        width: 12,
        height: 12
      });
      //   if(columns[col]&&columns[col].type=="select"){
      //    elements.push({
      //   type: "icon",
      //   svg: '<svg t="1716451067270" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2815" width="16" height="16"><path d="M966.4 323.2c-9.6-9.6-25.6-9.6-35.2 0l-416 416-425.6-416c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l441.6 432c9.6 9.6 25.6 9.6 35.2 0l435.2-432C976 345.6 976 332.8 966.4 323.2z" p-id="2816" fill="#8a8a8a"></path></svg>',
      //   x: rect.width - 15,
      //   y: top-10,
      //   width: 10,
      //   height: 10
      // });
      // }
     
      elements.push({
        type: "text",
        fill: "#E74C3D",
        font: "13px sans-serif",
        baseline: "top",
        text: text,
        x: left,
        y: top
      });

      maxWidth = Math.max(maxWidth, table.measureText(dataValue[0], { fontSize: "15" }).width);
    }
    maxWidthTd = maxWidthTd > maxWidth ? maxWidthTd : maxWidth; //对比一个最大值

    // console.log(maxWidthTd, "最大值");
    if (defaultWidthBool.value) {
      //编辑.style.left = `${offleft}px`;

      let editSelectMultiple = document.querySelector(".selectEditMultiple");
      editSelectMultiple.style.width = `${defaultWidth.value > maxWidthTd + 20 ? defaultWidth.value : maxWidthTd + 20}px`;
    }

    return {
      elements,
      expectedHeight: top + 20,
      expectedWidth: maxWidth + 20
    };
  }
};

const saveParams = paramsObj => {
  // tableInstance.selectCell(0, 0);
  //   tableInstance.selectCells([{
  //     start:{col:0,row:0},
  //     end:{col:3,row:7}
  // }])
  // console.log(props.tableData)
  // console.log(tableInstance.records);
  let allObj = [];
  let records = tableInstance.records;
  if (records.length) {
    allObj = records.map((r, index) => {
      let oneObj = {};
      for (let rKey in r) {
        oneObj[rKey] = r[rKey];
        if (Array.isArray(r[rKey])) {
          oneObj[rKey] = r[rKey][1];
        }
      }
      oneObj.id=props.tableData[index]._id;
      // return {
      //   data: oneObj,
      //   _id: props.tableData[index]._id,
      //   import_id: props.tableData[index].import_id,
      //   status: props.tableData[index].status,
      //   error_info: props.tableData[index].error_info
      // };
      return{
        ...oneObj
      }
    });
  }
  return allObj;
};

//转化文本
const changeTxt = (maxWidth, val) => {
  let text = "";
  let indexOfEnd = parseInt(maxWidth / 15);
  if (val && val.length) {
    if (indexOfEnd >= val.length) {
      text = val.substring(0, indexOfEnd);
    } else {
      text = val.substring(0, indexOfEnd) + "...";
    }
  }
  return text;
};
//修改值 tableInstance.changeCellValue(args.col,args.row);
//#region 单个值进行修改
const editSelectRef = ref(null);
const editSelectMultRef = ref(null);


const defaultWidth = ref(0); //默认宽度
const defaultWidthBool = ref(false); //双击编辑宽度
const inputValue=ref('');
const valueSelect = ref<string|number>(''); ////select选中值
const valueSelectMultiple=ref('');
const multipleSelect = ref(false); //select是否多选
const optionsSelect = ref([]);
let colCell = 0,
  rowCell = 0;

const editConInput = e => {
  console.log(e.target.innerText);
  initHide();
  tableInstance.changeCellValue(colCell, rowCell, [e.target.innerText,e.target.innerText]);
};

const selectChange = val => {
  console.log(val);
    let newArr= optionsSelect.value.filter(oItem=>oItem.value==val);
      let labelTxt= newArr[0].label;

  tableInstance.changeCellValue(colCell, rowCell, [labelTxt,val]);
};
//多选之后在处理
const selectChangeMulit = val => {
  console.log(val);
  console.log(valueSelectMultiple.value);
   tableInstance.changeCellValue(colCell, rowCell, [val.join(","),val.join(",")]);
};
//#endregion

//#region 批量修改
const lastClickIndexRow = ref(undefined); // 上一次点击的索引
const lastClickIndexCol = ref(undefined); // 上一次点击的索引
const moreEditBool = ref(false); //是否可批量编辑
const moreEditDataArr = ref(null); //批量编辑数据
const moreEditData = ref(null); //批量编辑数据
let moreRowCell = 0,
  moreColCell = 0;
const moreEditParams = reactive({
  //编辑对象参数
  label: "",
  value: ""
});
const moreEditColumnHeader = ref(null);
const moreEditDialogVisible = ref(false); //弹窗是否显示
const moreEditFormChange = (currVal, type) => {
  moreEditParams.value = currVal;
  if (moreEditColumnHeader.value.type == "multiple") {
    moreEditParams.label = currVal.join(",");
    return;
  }
  if(moreEditColumnHeader.value.type == "input"||moreEditColumnHeader.value.type == "number"){
     moreEditParams.label = currVal;
    return;
  }
  if(moreEditColumnHeader.value.type == "select"){ 
      let options=moreEditColumnHeader.value.values;
 
     let newArr= options.filter(oItem=>oItem.value==currVal);
 
     moreEditParams.label = newArr[0].label;
    return;
  }
  moreEditParams.label = currVal;
};
//批量编辑确认
const confirmEdit = () => {
  let key = moreEditColumnHeader.value.key;
  let pushData = [],
    pushIndex = [];
  moreEditData.value.map(m => {
    const { originData, col, row } = m;
    if (row != 0) {
      let recordIndex = tableInstance.getRecordShowIndexByCell(m.col, m.row);
      pushIndex.push(recordIndex);

      originData[key] =[ moreEditParams.label, moreEditParams.value];
      pushData.push(originData);
    }
  });
  tableInstance.updateRecords(pushData, pushIndex);

  moreEditDialogVisible.value = false;
  moreEditDataArr.value = "";
  moreEditData.value = "";
  //清空表单
  moreEditParams.label = "";
  moreEditParams.value = "";
  tableInstance.clearSelected();
  rangesRan={};
   setTimeout(function () {
      tableInstance.updateOption(option);
     
    }, 10);
};
//#endregion

const initHide = () => {
  let editContent = document.querySelector("#editCont");
  editContent.style.cssText = `display:none;`;

  let editSelect = document.querySelector(".selectEdit");
  editSelect.style.cssText = `display:none;`;

  let editSelectMultiple = document.querySelector(".selectEditMultiple");
  editSelectMultiple.style.cssText = `display:none;`;

  let errDiv = document.querySelector(".error_div_tip");
  errDiv.style.cssText = "display:none;";

  // maxWidthTd = 0;
  defaultWidth.value = 0;
  defaultWidthBool.value = false; //双击默认宽度
 
};
const drag = ref(false);
onMounted(() => {

  let scrollWidth=document.querySelector("#tableContainer").scrollWidth;
  // console.log(scrollWidth)
  if(scrollWidth>0&&columns.length<10){
     let width= parseInt((scrollWidth-65)/columns.length);
     option.columns= columns.map(cItem=>{
      return{
        ...cItem,
        width:width
      }
     })
  } 
  // 创建 VTable 实例
  tableInstance = new VTable.ListTable( document.getElementById("tableContainer"), option);
  console.log(tableInstance, "初始化");
  // records  //获取所有数据
  //updateRecords   修改数据 支持多条数据

  bindInstall(tableInstance,scrollWidth);

  
    //监听窗口事件
    window.addEventListener("resize", handleResize);
});

const bindInstall =(tableInstance,scrollWidth) => {
  tableInstance.on("mousemove_cell", args => {
      scrollWidth=document.querySelector("#tableContainer").scrollWidth;
      // console.log(args)
    const { col, row, target } = args;
    const record = tableInstance.getCellOriginRecord(col, row);
    if (!columns[col - 1]) {
      return;
    }
    if (record && Array.isArray(record[columns[col - 1].field])) {

      if (record[columns[col - 1].field].length==3) {
              let errTip = record[columns[col - 1].field][2];
        let bounds = target._globalAABBBounds;
        // width=target.attribute.width;
        // console.log(bounds,scrollWidth)
        let errDiv = document.querySelector(".error_div_tip");
        if(scrollWidth-bounds?.x2<20){
          
          document.querySelector(".err_tip_item").textContent = errTip;
          // errDiv.style.cssText = `display:block;top:${bounds?.y1}px;left:${bounds?.x1}px;`;
          
         errDiv.style.cssText = `display:block;top:${bounds?.y2}px;right:10px;`;
        let hei= errDiv.scrollHeight;
        errDiv.style.top=`${bounds?.y1-hei}px`;
        // let wid=errDiv?.scrollWidth;
        //   errDiv.style.left = `${bounds?.x1-wid}px`;
        }else{
           errDiv.style.cssText = `display:block;top:${bounds?.y1}px;left:${bounds?.x2}px;`;
           document.querySelector(".err_tip_item").textContent = errTip;
        } 
        
        // textContent
      }
    }

  });

  tableInstance.on("mouseleave_cell", args => {
    let errDiv = document.querySelector(".error_div_tip");
    errDiv.style.cssText = "display:none;";
  });

    // //拖拽
  tableInstance.on("drag_select_end", args => {
    // console.log(args, "拖拽，，，，");
    const { cells, col, row } = args;

    moreRowCell = row;
    moreColCell = col;
     initHide()
    // moreEditDataArr.value = cells; //批量数据

    // tableInstance.updateOption(option);
    // drag.value = false;
  });

  tableInstance.on("dropdown_menu_click", args => {
    // console.log("dropdown_menu_click");

    let selectCellArr = tableInstance.getSelectedCellInfos();
    // console.log(selectCellArr);
    moreEditDataArr.value = selectCellArr;
    // clearSelected

    if (selectCellArr && selectCellArr.length > 0) {
      let moreBoolShow = false;
      selectCellArr.map(mv => {
        if (mv.length > 1) {
          moreBoolShow = true;
        }
      });
      if (moreBoolShow) {
        alert("请选择一列进行编辑。。。");
        return;
      }
      moreEditDialogVisible.value = true;
      let headConfig = props.headData[moreColCell - 1];
      headConfig.multiple = false;
      if (headConfig.type == "multiple") {
        headConfig.multiple = true;
        moreEditParams.label = [];
      }
      moreEditColumnHeader.value = headConfig;

      //编辑数据
      let editArr = [];
      selectCellArr.map(v => {
        editArr.push(v[0]);
      });
      moreEditData.value = editArr;
    } else {
      alert("请选择一列进行编辑。。。");
      return;
    }
  });

  tableInstance.on("selected_cell", args => {
    // console.log(args);
    // console.log("selected_cell");
    const { ranges } = args; 
 
    let newRanges=ranges[0];
    if(ranges[0].start.col>ranges[0].end.col){
      newRanges={
        start:ranges[0].end,
        end:ranges[0].start,
      }
    }
    rangesRan = newRanges;

    setTimeout(function () {
      // tableInstance.updateOption(option);
      tableInstance.updateTheme("themeRegisterOne")
     
    }, 10);
    //
  });

  let clickNum = 0,
    timmer = null;
  tableInstance.on("click_cell", args => {
    // console.log("click_cell");
    // console.log(args);

    valueSelect.value = "";

    let { target, field, dataValue, event, row, col } = args;
    moreRowCell = row;
    moreColCell = col;

    initHide();

    const { ctrlKey, shiftKey } = event;
    if (!ctrlKey && !shiftKey) {
      moreEditDataArr.value = [];
      moreEditData.value = [];
    }

////双击
    clickNum++; 
    if (clickNum == 2) {
      clickNum = 0;
      clearTimeout(timmer);

      if (row != 0) {
        colCell = col;
        rowCell = row;
        let globalBounds = target._globalAABBBounds;
        // console.log(globalBounds);
        let x = globalBounds.x1,
          y = globalBounds.y1;
        let width = target.attribute.width;
        defaultWidth.value = width;
        defaultWidthBool.value = true; //双击默认宽度
        let colEll = props.headData[col - 1];
        // console.log(colEll);
        if (colEll.type == "input"||colEll.type == "number") {
          //input

          let editContent = document.querySelector("#editCont");
          editContent.style.cssText = `display:block;top:${y}px;left:${x}px;width:${width - 20}px;`;
          console.log(dataValue)
          editContent.textContent =dataValue[1];
          editContent.focus();
        }
   
        if (colEll.type == "select") {
          let editSelect = document.querySelector(".selectEdit");
          editSelect.style.cssText = `display:block;top:${y}px;left:${x}px;width:${width}px;`;
          optionsSelect.value = colEll.values;
          console.log(optionsSelect.value)
            console.log(dataValue)
          valueSelect.value =dataValue[1]; //dataValue[1] ;

          nextTick(() => { 
           setTimeout(()=>{ editSelectRef.value.toggleMenu();},50)
          });
        }

        if (colEll.type == "multiple") {
          // selectEditMultiple
          let editSelect = document.querySelector(".selectEditMultiple");
          editSelect.style.cssText = `display:block;top:${y}px;left:${x}px;width:${width}px;`;
          optionsSelect.value = colEll.values;
          valueSelectMultiple.value = dataValue[1].split(",");
          nextTick(() => {
       
              setTimeout(()=>{  editSelectMultRef.value.toggleMenu();},50)
           
          });
        }
      }
    }
    timmer = setTimeout(() => {
      clickNum = 0;
    }, 300);
  });



  tableInstance.on("resize_column",args=>{
     rangesRan={};
     initHide()
  })
 tableInstance.on("resize_column_end",args=>{
  tableInstance.updateTheme("themeRegisterOne")
 
  })


  //#region 滚动
  let scroolBool=true,scrollTimmer=null;
   tableInstance.on("scroll",args=>{
    // console.log(scroolBool,"滚动，，，")
    if(scroolBool){
        initHide()
        scroolBool=false;
    } 
    clearTimeout(scrollTimmer)
    scrollTimmer=setTimeout(()=>{
       scroolBool=true;
    },500)
  })
 
//#endregion
};

onUnmounted(()=>{
  
  //移除监听窗口事件
  window.removeEventListener("resize", handleResize);
})
 //窗口监听事件
const handleResize = () => {
    let scrollWidth=document.querySelector("#tableContainer").scrollWidth;
 
  if(scrollWidth>0&&columns.length<10){
     let width= parseInt((scrollWidth-65)/columns.length);
     option.columns= columns.map(cItem=>{
      return{
        ...cItem,
        width:width
      }
     })
  } 
  tableInstance.updateOption(option);
};
// 暴露给父组件使用
defineExpose({ handleHeadData, saveParams });
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
